<template>
  <div class="comment-list-component">
    <h3>课程评价列表</h3>
    
    <!-- 调试信息 -->
    <div v-if="showDebugInfo" class="debug-info">
      <p>接收的评论数量: {{ comments.length }}</p>
      <p>有效评论数量: {{ validComments.length }}</p>
    </div>
    
    <!-- 显示评价列表 -->
    <div v-if="validComments.length > 0" class="comments-container">
      <div v-for="comment in validComments" :key="comment.id" class="comment-item">
        <div class="comment-header">
          <span class="comment-author">{{ comment.authorName }}</span>
          <span class="comment-time">{{ formatDate(comment.addedTime) }}</span>
        </div>
        <div class="comment-body">{{ comment.body }}</div>
      </div>
    </div>
    <div v-else class="no-comments">
      <p>暂无评价数据</p>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, watch } from 'vue'

export default {
  name: 'CommentList',
  props: {
    comments: {
      type: Array,
      default: () => []
    },
    // 开发环境显示调试信息
    showDebugInfo: {
      type: Boolean,
      default: process.env.NODE_ENV === 'development'
    }
  },
  setup(props) {
    // 格式化日期
    const formatDate = (timestamp) => {
      if (!timestamp) return '暂无时间'
      // 处理可能的字符串类型时间戳
      const timestampNum = typeof timestamp === 'string' ? parseInt(timestamp) : timestamp
      const date = new Date(timestampNum)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    }
    
    // 计算属性：过滤并验证评论数据
    const validComments = computed(() => {
      // 确保输入是数组
      if (!Array.isArray(props.comments)) {
        console.warn('评论数据格式错误，期望数组但收到:', typeof props.comments, props.comments)
        return []
      }
      
      // 过滤并标准化评论
      return props.comments
        .filter(comment => {
          // 基础验证
          const isValid = comment && typeof comment === 'object'
          if (!isValid) {
            console.warn('无效的评论数据:', comment)
          }
          return isValid
        })
        .map(comment => ({
          id: comment.id || `comment_${Date.now()}_${Math.random().toString(36).substr(2, 6)}`,
          authorName: comment.authorName || comment.userName || comment.userid || '匿名用户',
          body: comment.body || comment.content || '暂无内容',
          addedTime: comment.addedTime || comment.createTime || Date.now()
        }))
    })
    
    // 监听评论数据变化
    watch(() => props.comments, (newComments) => {
      console.log('评论数据已更新，原始评论数量:', newComments.length)
      console.log('处理后的有效评论数量:', validComments.value.length)
    }, { deep: true })
    
    onMounted(() => {
      console.log('CommentList组件挂载完成，接收的原始评论数据:', props.comments)
      console.log('处理后的有效评论数据:', validComments.value)
    })
    
    return {
      formatDate,
      validComments,
      showDebugInfo
    }
  }
}
</script>

<style scoped>
.comment-list-component {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-top: 20px;
}

.comment-list-component h3 {
  margin-bottom: 20px;
  color: #303133;
}

.comments-container {
  margin-top: 10px;
}

.comment-item {
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.comment-author {
  font-weight: bold;
  color: #303133;
}

.comment-time {
  color: #909399;
  font-size: 12px;
}

.comment-body {
  color: #303133;
  line-height: 1.6;
  word-break: break-word;
  min-height: 24px; /* 确保即使内容为空也有占位 */
}

.no-comments {
  text-align: center;
  padding: 40px 0;
  color: #909399;
}

.debug-info {
  padding: 10px;
  background-color: #f0f7ff;
  border-left: 3px solid #409eff;
  margin-bottom: 15px;
  font-size: 12px;
  color: #606266;
}
</style>